<html>
    <head>
        <meta charset="utf-8">
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body >
        <div id="myapp" v-cloak>
            <div v-show="show_flag">
                {{message}}
                <span v-cloak>{{hi}}</span>
                <a v-bind:href="url">跳转百度</a>
            </div>
            <div v-if="show_flag">
                <button v-on:click="myclick('按钮被点击了')">点击按钮</button>
            </div>
            <div v-else>
                <form action="https://www.baidu.com" method="get">
                    <input type="submit" name="submit" value="提交" v-on:click.prevent="myclick('按钮被点击了')">
                </form>
                <div v-for="p in people">{{p}}</div>
            </div>
            <input type="text" v-model="input">
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#myapp',
            data: {
                message: 'hello',
                hi: "Bit",
                url: "https://taobao.com",
                show_flag:false,
                people: ["大桥", "小乔", "貂蝉", "吕布"],
                input:"初始值"
            },
            methods: {
                myclick: function(str) {
                    alert(str);
                }
            }
        });
    </script>
</html>